    //右侧导航栏
    var needLogin = document.querySelectorAll('.fixed_bar .right_nav');
    for(var i=0;i<needLogin.length;i++){
      needLogin[i].onmouseenter = function(){
        animate(this.children[1],{'left':-78,'opacity':1,'display':'block'},20);
        this.children[0].style.backgroundColor = "#e32332";
      }
      needLogin[i].onmouseleave = function(){
        animate(this.children[1],{'left':-128,'opacity':0,'display':'none'},20);
        this.children[0].style.backgroundColor = "";
      }
    }

    //回到顶部按钮
    var right_goto = document.querySelectorAll('.fixed_bar .go_top');
      window.onscroll=function (e){
          console.log(e.scrollTop);
      }

    //购物车
    var shoppingcar = document.querySelector('.f_right_shopping');
    var shoppingcarimg = document.querySelector('.f_right_shopping .text .icon');
    var shoppingnum = document.querySelector('.f_right_shopping .text .cartNum');
    var shoppinglist = document.querySelector('.f_right_shopping .shopping_list');
    var list_null = document.querySelector('.list_null');
    shoppingcar.onmouseenter = function(){
      animate(shoppinglist,{'height':100,'display':'block'},20);
      list_null.style.display = "block";
      this.children[0].style.background = "#e32332";
      this.children[0].style.color = "white";
      shoppingnum.style.color = "white";
      shoppingcarimg.style.background = "url(image/mouse/base.png) no-repeat -164px -38px";
    }
    shoppingcar.onmouseleave = function(){
      animate(shoppinglist,{'height':0,'line-height':0},20);
      list_null.style.display = "none";
      this.children[0].style.background = "";
      this.children[0].style.color = "";
      shoppingnum.style.color = "";
      shoppingcarimg.style.background = "url(image/mouse/base.png) no-repeat -164px -20px";
    }


    //头部全部商品
    var nav = document.querySelector('.f_left_allshop');
    var nav_text = document.querySelector('.f_left_allshop .text');
    var nav_ul = document.querySelector('.top_nav .f_left_allshop ul')
    nav.onmouseenter = function(){
      nav_ul.style.display = "block";
      this.style.backgroundColor = "#e32332";
      this.style.color = '#fff';
      // nav_text.children[0].className = "top_nav_current";
      nav_text.children[0].style.background = "url(image/mouse/base.png) no-repeat -39px 0";
    }
    nav.onmouseleave = function(){
      nav_ul.style.display = "none";
      this.style.backgroundColor = "";
      this.style.color = '';
      nav_text.children[0].style.background = "url(image/mouse/base.png) no-repeat -24px 0";
    }

    //头部所有商品内部内容
    var a_font = document.querySelectorAll('.ellipsis2');
    var lis = document.querySelectorAll('.lis');
    for(var i = 0;i<a_font.length;i++){
      lis[i].onmouseenter = function(){
        console.log(this.children[1].children.length)
        animate(this.children[1],{'height':this.children[1].children.length*40,'display':'block'},20);
      }
      lis[i].onmouseleave = function(){
        animate(this.children[1],{'height':0,'display':'none'},20);
      }
    }

    //搜索框
    var text = document.querySelector('.cf .text');
    var keyword = document.querySelector('.keyword');
    var textarr = ["耳机",'哈哈','啧啧',"鼠标",'键盘'];
    var bb = document.querySelector('.f_left_input .btn');
    // var keyword_list = document.querySelector('.keyword_list');
    var form = document.querySelector('.cf');
    text.onfocus = function(){
      keyword.style.display = "none";
      this.style.border = "2px solid #e32332";
      var keyword_list = document.getElementById('keyword_list');
      if(keyword_list){
        keyword_list.style.display = 'block';
      }
      this.onkeyup = function(){
        var keyword_list = document.getElementById('keyword_list');
        if(keyword_list){
          form.removeChild(keyword_list);
        }
        var txt = this.value;
        var newarr = [];
        for(var i=0;i<textarr.length;i++){
          if(textarr[i].indexOf(txt) == 0){
            newarr.push(textarr[i]);
          }
        }

        if(newarr.length == 0||this.value==""){
          return;
        }

        var box_list = document.createElement('div');
        box_list.id = "keyword_list";
        box_list.style.position = "absolute";
        box_list.top = "40px";
        box_list.left = "1px";
        box_list.width = "270px";
        box_list.style.border = "1px solid #ccc";
        box_list.style.backgroundColor = "#fff";
        form.appendChild(box_list);

        
        for(var i = 0;i<newarr.length;i++){
          var pp = document.createElement('p');
          pp.innerText = newarr[i];
          pp.style.display = "block";
          pp.style.padding = "0 10px";
          pp.style.height = '30px';
          pp.style.lineHeight = "30px";
          pp.style.color = "red";
          box_list.appendChild(pp);
        }

        var ps = document.getElementById('keyword_list').getElementsByTagName('p');
        for(var i=0;i<ps.length;i++){
          ps[i].onmouseenter = function(){
            this.style.backgroundColor = "#eee";
          }
          ps[i].onmouseleave = function(){
            this.style.backgroundColor = "";
          }
          ps[i].onclick = function(){
            text.value=this.innerText; 
            box_list.style.display = "none";
          }
        }
        bb.onclick = function(){
          if(text.value == "键盘"){
            window.open("keyboard.html",'_blank');
          }else if(text.value == "鼠标"){
            window.open("mouse.html",'_blank');
          }else if(text.value = "耳机"){
            window.open("earphone.html",'_blank');
          }
        }
      }
    }

    text.onblur = function(){
      var keyword_list = document.getElementById('keyword_list');
      if(this.value.length != 0){
        keyword.style.display = "none";
      }else{
        keyword.style.display = "block";
      }
      this.style.border = "";
      //keyword_list.style.display = 'block';
    }
    //e.target真正触发事件的对象 input
    //e.currentTarget 绑定事件的对象
    document.onclick = function (e) {
      var keyword_list = document.getElementById('keyword_list');
      if(keyword_list&&e.target.nodeName!='INPUT'){
        keyword_list.style.display = 'none';
      }
      
    }

    //右侧导航栏购物车
    var rightcar = document.querySelector('.fixed_cart_tip');
    var car = document.querySelector('.car');
    var cartNum = document.querySelector('.fixed_cart_tip .cartNum');
    rightcar.children[0].onmouseenter = function(){
      this.style.backgroundColor = "#e32332";
      car.style.background="url(image/mouse/base.png) no-repeat -164px -38px";
      cartNum.style.backgroundColor = "black";
    }
    rightcar.children[0].onmouseleave = function(){
      this.style.backgroundColor = "";
      car.style.background="url(image/mouse/base.png) no-repeat -184px -56px";
      cartNum.style.backgroundColor = "#e32332";
    }
  // 轮播图
  var bd = document.querySelector('.bd');
  var imgWidth = bd.offsetWidth;
  var sps = document.querySelectorAll('.hd ul li');
  var spsimg = document.querySelectorAll('.tempWrap ul li img');
  var uls = document.querySelector('.goods_detail .gallery .picFocus .tempWrap ul');
  var timer = null;
  timer = setInterval(rightS,3000);
  uls.appendChild(uls.children[0].cloneNode(true));
    var pic = 0;
 	  function rightS(){
 	  if(pic == uls.children.length-1){
 		 pic = 0;
 		 uls.style.left = -pic * imgWidth + "px";
 	  }
  	pic++;
 	  lunboanimate(uls,-pic*imgWidth,10);

 	  if(pic == uls.children.length-1){
 		 sps[0].className = "opacity";
 		 sps[sps.length-1].className = "";
 	  }else{
 		 for(var i = 0;i<sps.length;i++){
 		 sps[i].className = "";
 	    }
 	  sps[pic].className = "opacity";
      }
    }
  bd.onmouseenter = function(){
 	//console.log(sps[pic].src);
 	clearInterval(timer);
 	imgObj.src = spsimg[pic].src;
  }

  bd.onmouseleave = function(){
 	timer = setInterval(rightS,3000);
  }



 //角标移动
  for(var i = 0;i<sps.length;i++){
 	sps[i].setAttribute('index',i);
 	sps[i].onmouseenter = function(){
 		for(var k=0;k<sps.length;k++){
 			sps[k].style.opacity = "0.5";
 		}
 		this.style.opacity = "1";
 		pic = this.getAttribute('index');
 		lunboanimate(uls,-pic*imgWidth,10);
 	}
 }

//立即购买和加入购物车
var buy = document.querySelector('.property .btns .buy');
//立即购买
buy.onmouseenter = function(){
	this.style.backgroundColor = "#c20315";
}
buy.onmouseleave = function(){
	this.style.backgroundColor = "";
}
//加入购物车
var buycar = document.querySelector('.property .btns .add');
buycar.onmouseenter = function(){
	this.children[0].style.background = "url(image/mouse/base.png) no-repeat -184px -99px";
	this.style.backgroundColor = "#c20315";
	this.style.color = "white";
}
buycar.onmouseleave = function(){
	this.children[0].style.background = "url(image/mouse/base.png) no-repeat -184px -74px";
	this.style.backgroundColor = "";
	this.style.color = "";
}

//关注
var share = document.querySelector('.share .like');
share.onmouseenter = function(){
	this.children[0].style.background = "url(image/mouse/base.png) no-repeat -145px 0px";
	this.style.color = "#e32332";
	this.children[1].style.color = "#e32332";
}
share.onmouseleave = function(){
	this.children[0].style.background = "url(image/mouse/base.png) no-repeat -132px 0px";
	this.style.color = "";
	this.children[1].style.color = "";
}

//选择颜色分类
var select = document.querySelector('.scom .select');
var select_div = document.querySelector('.select_div');
var cancel = document.querySelector('.cancel');
console.log(cancel);
select.onclick = function(){
	console.log(111)
	animate(select_div,{'height':80,'padding':14,'border':'1px solid #e0e0e0'},30);
}
cancel.onclick = function(e){
	
	animate(select_div,{'height':0,'padding':0,'border':'1px solid #e0e0e0'},30);
	e.stopPropagation();
}


//猜你喜欢的边框
var redborder = document.querySelectorAll('.presentation .guess_like li');
for(var i = 0;i<redborder.length;i++){
	redborder[i].onmouseenter = function(){
		this.style.border = "1px solid #e32332";
	}
	redborder[i].onmouseleave = function(){
		this.style.border = "";
	}
}

//tab切换
var lis = document.querySelectorAll('.product_detail .detail_nav>li');
var page = document.querySelectorAll('.desc_pane .content');
console.log(page)
console.log(lis)
for(var  i = 0;i<lis.length;i++){
	lis[i].setAttribute('index',i);
	lis[i].onclick = function(){
		for(var a = 0;a<lis.length;a++){
			lis[a].className = "";
		}
		this.className = "curr";

		for(var j = 0;j<page.length;j++){
			page[j].style.display = "none";
		}
		var index = this.getAttribute('index');
		page[index].style.display = "block";
	}
}

//寒冰耳机
var hanbing = document.querySelector('.comment .rate_header dl dd a');
hanbing.onmouseenter = function(){
	this.style.border = "1px solid #e32332";
	this.style.color = "#e32332";
}
hanbing.onmouseleave = function(){
	this.style.border = "";
	this.style.color = "";
}

//好评
var haoping = document.querySelectorAll('.comment .rate_toolbar a');
for(var i=0;i<haoping.length;i++){
	haoping[i].onmouseenter = function(){
		for(var k=0;k<haoping.length;k++){
			haoping[k].style.color = "";
		}
		this.style.color = '#e32332';
	}
	haoping[i].onmouseleave = function(){
		this.style.color = '';
	}
}

//放大镜
  var box = document.querySelector('.gallery');
  //小图盒子对象
  var small = document.querySelector('.bd .tempWrap');
  //遮罩层
  var mask = document.querySelector('.mask');
  //大图div对象
  var big = document.querySelector(".big_img");
  //大图对象
  var imgObj = document.querySelector(".big_img img");
//控制遮罩层的显示跟隐藏 small绑定进入跟出去事件
 small.onmouseenter = function(){
    mask.style.display = 'block';
    big.style.display = 'block';
  }
  small.onmouseleave = function(){
    mask.style.display = 'none';
    big.style.display = 'none';
  }
  window.onscroll = function(){
  	var top = box.offsetTop;
  	//console.log(top)
  }
//small鼠标移动事件 让我们的遮罩层进行移动
  small.onmousemove = function(e){
    //获取我们的一个margin距离 上下和左右的
    var tt = document.documentElement.scrollTop;
    var top = box.offsetTop-tt;
    //var top = box.clientY;
    var left = box.offsetLeft

    //减掉我们的一个margin值鼠标在遮罩层的左上角
    //要让鼠标在遮罩层的中间 获取遮罩层宽度跟高度，左边上边各走宽度跟高度的一半

    //获取遮罩层的宽度跟高度
    var height = mask.offsetHeight;
    var width = mask.offsetWidth;

    var x = e.clientX -left -width/2;
    var y = e.clientY -top -height/2;

    //控制我们左边跟上边的一个移动范围 最小值为0 
    x = x<=0?0:x;
    y = y<=0?0:y;

    //控制我们遮罩层右边跟下边一个最大的可移动范围
    var bigHeight = small.offsetHeight - height
    var bigWidth = small.offsetWidth - width;

    x = x<= bigWidth?x:bigWidth;
    y = y<= bigHeight?y:bigHeight;

    //赋值给mask
    mask.style.left = x + 'px';
    mask.style.top = y + 'px';

    //大图移动方向跟我们的遮罩层是相反的
    //遮罩层的移动距离/大图的移动距离 = 遮罩层的可移动的最大距离/大图的可移动的最大距离
    //大图的移动距离 = 遮罩层的移动距离*大图的可移动的最大距离/遮罩层的可移动的最大距离
    //大图的横向的可移动的最大距离
    var bigX = Math.abs(imgObj.offsetWidth-big.offsetWidth);
    //大图的纵向的可移动最大距离
    var bigY = imgObj.offsetHeight-big.offsetHeight;

    //debugger

    //求我们大图的要移动的距离
    var moveX = x*bigX/bigWidth;
    var moveY = y*bigY/bigHeight;

    imgObj.style.marginTop = -moveY + 'px'
    imgObj.style.marginLeft = -moveX + 'px'
  }


  //商务合作
  var hezuo = document.querySelector('.hezuo');
  var tip = document.querySelector('.hezuo .tip');
  var online = document.querySelector('.contact a');
  console.log(hezuo);
  online.onmouseenter = function(){
    this.style.backgroundColor = "#e32332";
    this.style.color = "white";
  }
  online.onmouseleave = function(){
    this.style.backgroundColor = "";
    this.style.color = "#e32332";
  }

  hezuo.onmouseenter = function(){
    animate(tip,{'line-height':24,'display':'block'},40);
  }
  hezuo.onmouseleave = function(){
    animate(tip,{'line-height':0,'display':'none'},40);
  }

  //返回顶部
  var goTop = document.querySelector('.fixed_bar .go_top');
  window.onload = function() {
      window.onscroll = function() {
          if(document.documentElement.scrollTop>0){
              goTop.style.display = 'block'
          }else{
              goTop.style.display = 'none'
          }
          leader = document.documentElement.scrollTop;  // 把 卷去的头部 给  起始位置
          console.log(leader);
      }
      var leader = 0,target = 0,timer10 = null;
      // leader 起始位置  target  目标位置
      goTop.onclick = function() {
          target = 0;  //  点击完毕之后 奔向0 去的  不写也可以
          timer10 = setInterval(function() {
              leader = leader + (target - leader ) / 10;
              window.scrollTo(0,leader);  // 去往页面中的某个位置
              if(leader == target)
              {
                  clearInterval(timer10);
              }
          },20);
      }
  }

  goTop.onmouseenter = function(){
    this.style.backgroundColor = "#e32332";
  }
  goTop.onmouseleave = function(){
    this.style.backgroundColor = "";
  }

 //小轮播动画函数
 function lunboanimate(element, target,time) {
     //清除定时器
     clearInterval(element.timeId)
     //element.timeId 定时器的名字
     element.timeId = setInterval(function () {
         //获取元素的一个当前left位置 
         var current = element.offsetLeft
         //要移动的步伐
         var step = 10;
         //目标位置跟当前位置的一个大小区分
         step = current > target ? -step : step;

         current += step  //current = current + step
         //current-target 相差的距离
         if (Math.abs(current - target) > Math.abs(step)) {
             element.style.left = current + 'px'
         } else {
             clearInterval(element.timeId)
             element.style.left = target + 'px'
         }
         // if(current>=target){
         //   clearInterval(element.timeId)
         // }
         // element.style.left = current+'px'

     },time)
 }



 // 变速动画函数
 function getStyle(ele,str){
 	if(window.getComputedStyle){
 		return getComputedStyle(ele,null)[str];
 	}else{
 		return ele.currentStyle[str];
 	}
 }
 function animate(ele,json,time,fn){
 	clearInterval(ele.timeId);
 	// console.log(111);
 	ele.timeId = setInterval(function(){
 		var flag = true;
 		for(var key in json){
 			if(key == 'opacity'){
 				var current = getStyle(ele,key)*100;
 				var target = json[key]*100;
 				var step = (target - current)/10;
 				step = step>0?Math.ceil(step):Math.floor(step);
 				current += step;
 				ele.style[key] = current/100;
 			}else if(key == "zIndex"){
 				ele.style[key] = json[key];
 			}else if(key == 'display'){
 				ele.style[key] = json[key];
 			}else{
 				var current = parseInt(getStyle(ele,key));
 				var target = json[key];
 				var step = (target-current)/10;
 				step = step>0?Math.ceil(step):Math.floor(step);
 				current += step;
 				ele.style[key] = current + "px";
 				}
 				if(current!=target){
 					flag=false;
 				}
 			}
 		if(flag){
 			clearInterval(ele.timeId);
 			if(fn){
 				fn();
 			}
 		}
 	},time);
 }
